<template>
    <div class="goodsAdd">
       <el-card>
            <el-alert title="消息提示的文案" type="info" center show-icon :closable='false'>
        </el-alert>
        <!-- 进度条 -->
        <el-steps :active="activeName-0" finish-status="success">
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <!-- tab页 -->
        <el-tabs :tab-position="tabPosition" v-model="activeName">
            <el-tab-pane label="基本信息" name="0">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="商品名称" prop="goods_name" :rules='[{required:true,message:"请输入商品名称",trigger:"blur"}]'>
                        <el-input v-model="form.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price" :rules='[{required:true,message:"请输入商品价格",trigger:"blur"}]'>
                        <el-input v-model="form.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight" :rules='[{required:true,message:"请输入商品重量",trigger:"blur"}]'>
                        <el-input v-model="form.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="attrs" :rules='[{required:true,message:"请输入商品分类",trigger:"blur"}]'>
                        <el-cascader v-model="attrs" :options="options"></el-cascader>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
            <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
            <el-tab-pane label="商品图片" name="3">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
              <i class="el-icon-download"></i>
            </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
                        </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="4">
                <quill-editor   :content="content" @change="onEditorChange($event)" />
                <el-button class="adds" type="primary">添加商品</el-button>
            </el-tab-pane>
        </el-tabs>
       </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                tabPosition: 'left',
                activeName: "0",
                attrs: [],
                options: [],
                content:"",
                form: {
                    goods_name: "",
                    goods_price: "",
                    goods_weight: ""
                }
            };
        },
        mounted() {
        },
        methods: {
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            handleClick(tab, event) {
                console.log(tab._props.name)
                this.active = tab._props.name
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
             onEditorChange(v) {
     // console.log(v.text);
     this.content= v.text;  
    },
        },
    };
</script>

<style scoped>
    .el-tabs {
        margin-top: 20px;
    }
    .quill-editor{
        height: 200px;
    }
    .goodsAdd{
        width: 100%;
        height: 100%;
    }
    .adds{
        margin-top: 80px;
    }
    .el-steps{
        margin: 20px;
    }
</style>